<template>
  <div class="table-main card">
    <el-tabs v-model="activeName">
      <!--  @tab-click="handleClick" -->
      <el-tab-pane label="会员设置" name="1">
        <points :member-list="allData?.userintegralrule" />
      </el-tab-pane>
      <!-- 微餐厅start -->
      <el-tab-pane label="微餐厅设置" name="2" style="overflow-y: auto">
        <el-form
          ref="formRef"
          :rules="rules"
          :data="canteenData"
          label-width="200px"
          status-icon
          label-position="left"
          class="pl20 pr20"
        >
          <div class="canteen-mode">
            <div class="title">用餐模式</div>
            <el-form-item label="点餐模式:" prop="orderType">
              <el-select v-model="canteenData.orderType" class="width320" @change="onChange">
                <el-option :value="1" label="快餐模式"></el-option>
                <el-option :value="2" label="开台模式"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="canteenData.orderType === 1" label="是否和收银前台同步" prop="isSynPos">
              <el-radio-group v-model="canteenData.isSynPos">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="启用选择就餐人数:" prop="isSelectPerson" v-if="canteenData.orderType === 2">
              <el-radio-group v-model="canteenData.isSelectPerson">
                <el-radio :value="true">启用</el-radio>
                <el-radio :value="false">不启用</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="启用外卖:" prop="isTakeout" v-if="canteenData.orderType === 1">
              <el-radio-group v-model="canteenData.isTakeout">
                <el-radio :value="true">启用</el-radio>
                <el-radio :value="false">不启用</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="允许订单结算:" prop="isSettlement" v-if="canteenData.orderType === 2">
              <el-radio-group v-model="canteenData.isSettlement">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- v-if="canteenData.orderType === 1" -->
            <el-form-item label="未关联商品统一归属商品:" prop="isSettlement">
              <el-button
                @click="openSelectList('mtUnrelatedFoodId')"
                size="small"
                :type="canteenData.mtUnrelatedFoodId ? 'default' : 'primary'"
              >
                {{ canteenData.mtUnrelatedFoodId ? "已配置" : "未配置" }}
              </el-button>
            </el-form-item>

            <!-- 套餐 -->
            <el-form-item label="未关联套餐统一归属商品:" prop="isSettlement">
              <el-button
                @click="openSelectList('unrelatedPackageFoodId')"
                size="small"
                :type="canteenData.unrelatedPackageFoodId ? 'default' : 'primary'"
              >
                {{ canteenData.unrelatedPackageFoodId ? "已配置" : "未配置" }}
              </el-button>
            </el-form-item>
          </div>

          <div class="setting-wx" style="margin-top: 30px">
            <div class="title">小程序设置</div>
            <el-form-item label="小程序标题" prop="wxTitle">
              <el-input class="width320" placeholder="请输入" v-model="canteenData.wxTitle" />
            </el-form-item>
            <el-form-item style="margin-top: -10px">
              <div class="width320" style="color: #999999; text-align: right">{{ canteenData.wxTitle.length }}/30</div>
            </el-form-item>
            <el-form-item prop="loginBackImg" label="小程序登录页背景图：">
              <IMG v-model:imageUrl="canteenData.loginBackImg"></IMG>
            </el-form-item>
            <el-form-item>
              <div style="color: #999999">图片建议上传：3.25 ： 1 （例：宽646px * 199px）</div>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button @click="submitCanteen()" type="primary">保存更改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 微餐厅end -->

      <el-tab-pane label="短信设置" name="3">
        <el-form
          ref="formRef"
          :rules="rules"
          :data="canteenData"
          label-width="100px"
          status-icon
          label-position="left"
          class="pl20 pr20"
        >
          <div class="setting-message">
            <div class="title">短信设置</div>
            <div class="subhead">会员积分变动短信设置</div>
            <el-form-item label="是否发送:">
              <el-radio-group v-model="canteenData.pointRemind">
                <el-radio label="自动发送" :value="true" />
                <el-radio label="不发送" :value="false" />
              </el-radio-group>
            </el-form-item>
            <div class="subhead">会员余额及次卡变动短信设置</div>
            <el-form-item label="是否发送:">
              <el-radio-group v-model="canteenData.balanceRemind">
                <el-radio label="自动发送" :value="true" />
                <el-radio label="不发送" :value="false" />
              </el-radio-group>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button @click="submitCanteen()" type="primary">保存更改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="商品设置" name="4">User</el-tab-pane>
      <el-tab-pane label="订单管理" name="5">Config</el-tab-pane>
      <el-tab-pane label="特殊开关" name="6">User</el-tab-pane>
      <el-tab-pane label="提现设置" name="7">Task</el-tab-pane>
      <el-tab-pane label="邀请好友设置" name="8">Task</el-tab-pane> -->
    </el-tabs>
    <!-- <div class="tabs">
      <div class="item">会员设置</div>
    </div> -->

    <SelectTreeData ref="productRef" @radio="onRadio"></SelectTreeData>
  </div>
</template>

<script lang="tsx" setup name="setPlatform">
import { ref, onMounted, watch, reactive } from "vue";
import { getUserIntegralRulesInfo, editCanteenRules } from "@/api/modules/system";
import IMG from "@/components/Upload/Img.vue";
import points from "./points.vue";
import { ElMessage, ElForm } from "element-plus";
import SelectTreeData from "@/components/SelectTreeData/index.vue";
import { getGoodsList, getFoodCategoryList } from "@/api/modules/goods";

// import { selectCountList } from "@/utils/serviceDict";

const activeName = ref("1");

// 微餐厅餐厅 start
interface CanteenData {
  storeId: number;
  isSynPos: boolean; // 同步
  isSelectPerson: boolean; // 启动就餐人数
  isTakeout: boolean; // 是否外带
  orderType: number; // 点餐模式
  isSettlement: boolean; // 是否允许结账
  pointRemind: boolean;
  balanceRemind: boolean;
  loginBackImg: string;
  wxTitle: string;
  mtUnrelatedFoodId: number;
  unrelatedPackageFoodId: number;
}
const canteenData = ref<CanteenData>({
  storeId: 0,
  isSynPos: true, // 同步
  isSelectPerson: false, // 启动就餐人数
  isTakeout: false, // 是否外带
  orderType: 1, // 点餐模式
  isSettlement: false, // 是否允许结账
  pointRemind: true,
  balanceRemind: true,
  loginBackImg: "",
  wxTitle: "",
  mtUnrelatedFoodId: 0,
  unrelatedPackageFoodId: 0
});

const rules = reactive<any>({
  wxTitle: [
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (canteenData.value.wxTitle.length > 30) {
          return callback(new Error("不能超过30个字符"));
        }
        callback();
      },
      message: "不能超过30个字符"
    }
  ]
});
const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const submitCanteen = async () => {
  await formRef.value!.validate();
  await editCanteenRules(canteenData.value);
  ElMessage.success({ message: "修改成功!" });
  onLoad();
};

const allData = ref<any>({});
const onLoad = () => {
  getUserIntegralRulesInfo().then(res => {
    allData.value = res.data;
    canteenData.value = res.data.storeSetting;
  });
};

// 修改点餐模式
// watch(
//   () => canteenData.value.orderType,
//   e => {
//     if (e === 1) {
//       canteenData.value.isSelectPerson = false;
//       isDisabled.value = true;
//       // isDisabledCashier.value = false;
//       canteenData.value.isSettlement = false;
//       isDisabledSettlement.value = true;
//     }  else {
//       canteenData.value.isTakeout = false;
//       isDisabled.value = false;
//       isDisabledCashier.value = true;
//       canteenData.value.isSynPos = true;
//       canteenData.value.isSettlement = true;
//     }
//   },
//   { immediate: true }
// );

const onChange = (val: number) => {
  if (val === 1) {
    canteenData.value.isSelectPerson = false;
    canteenData.value.isSynPos = true;
    canteenData.value.isSettlement = true;
  } else {
    canteenData.value.isTakeout = false;
    canteenData.value.isSettlement = true;
    canteenData.value.isSynPos = false;
    canteenData.value.isSelectPerson = true;
  }
};

onMounted(() => {
  onLoad();
});
const productRef = ref<InstanceType<typeof SelectTreeData> | null>();
const openSelectList = (type: string) => {
  productRef.value!.acceptParams({
    title: "菜品选择",
    isView: false,
    idName: "foodCategoryId",
    selTags:
      type === "mtUnrelatedFoodId"
        ? [{ id: canteenData.value.mtUnrelatedFoodId }]
        : [{ id: canteenData.value.unrelatedPackageFoodId }],
    mate: "id",
    selType: "radio",
    columns: [
      { type: "radio", width: 80 },
      { prop: "name", label: "菜品名称", align: "left" },
      { prop: "foodTypeName", label: "分类", width: 120 },
      { prop: "foodSpecName", label: "规格", width: 100 },
      { prop: "posPrice", label: "菜品价格", width: 100 }
    ],
    index: type,
    api: getGoodsList,
    treeApi: getFoodCategoryList
  });
};

// // 选中菜品
// const selectCountList = (e: any) => {
//   console.log(e);
//   canteenData.value.mtUnrelatedFoodId = e.list.map((v: any) => v.id);
// };
// 选中菜品
const onRadio = (e: any) => {
  console.log(e);
  if (e.index === "mtUnrelatedFoodId") {
    canteenData.value.mtUnrelatedFoodId = e.data.id;
  } else {
    canteenData.value.unrelatedPackageFoodId = e.data.id;
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: solid 1px var(--el-menu-border-color);
  .item {
    // padding: 0 20px;
    font-size: 14px;
  }
}
.title {
  padding-left: 10px;
  margin: 10px 0 20px;
  font-size: 18px;
  line-height: 16px;
  border-left: 1px solid #fdc31d;
}
.subhead {
  padding: 10px 0;
  font-size: 16px;
}
.setting-message {
  padding: 20px;
}
</style>
